MkImageSlideshow
Node to show an Image slideshow (in autoplay mode).¶
Example: Regular¶
Bases: MkTemplate
Name | Children | Inherits |
---|---|---|
MkTemplate mknodes.templatenodes.mktemplate Node representing a jinja template. |
graph TD
94854582959280["mkimageslideshow.MkImageSlideshow"]
94854582782240["mktemplate.MkTemplate"]
94854582919984["mkcontainer.MkContainer"]
94854582916880["mknode.MkNode"]
94854582838576["node.Node"]
140544995341632["builtins.object"]
94854582782240 --> 94854582959280
94854582919984 --> 94854582782240
94854582916880 --> 94854582919984
94854582838576 --> 94854582916880
140544995341632 --> 94854582838576
/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkimageslideshow/metadata.toml
[metadata]
icon = "mdi:image-multiple"
name = "MkImageSlideshow"
group = "image"
[[resources.js]]
link = "https://rawgit.com/ruyadorno/simple-slider/master/dist/simpleslider.min.js"
[[resources.js]]
filename = "slideshow.js"
content = """
window.addEventListener('DOMContentLoaded', function () {
simpleslider.getSlider();
})
"""
[[resources.css]]
filename = "https://unpkg.com/img-comparison-slider@7/dist/styles.css"
[examples.regular]
title = "Regular"
jinja = """
{{ ["https://picsum.photos/700", "https://picsum.photos/701"] | MkImageSlideshow }}
"""
[output.html]
template = """
<div style="width: 100%; padding-bottom: 25%" data-simple-slider="">
{% for image_url in node.images %}
<img src="{{ image_url }}">
{% endfor %}
</div>
"""